<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="top-nav">
			<!-- <image class="back-icon" src="@/static/folding-fan.png" @click="goBack"></image> -->
			<text class="page-title">传统解梦</text>
		</view>
		<!-- 梦境分类列表 -->
		<view class="category-list">
			<view class="bamboo" v-for="(category, index) in categories" :key="index" @click="goToDetail(category)">
				<text>{{ category }}</text>
			</view>
		</view>
		<!-- 筛选与排序 -->
		<view class="filter-sort">
			<view class="button" @click="showFilter">筛选</view>
			<view class="button" @click="showSort">排序</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				categories: ['人物之梦', '景物之梦', '动物之梦']
			};
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			goToDetail(category) {
				// 这里可实现跳转到具体解梦详情页
				console.log(`进入 ${category} 解梦详情页`);
			},
			showFilter() {
				// 显示筛选条件
				console.log('显示筛选条件');
			},
			showSort() {
				// 显示排序方式
				console.log('显示排序方式');
			}
		}
	};
</script>

<style scoped>
	.container {
		background-color: #fff;
		min-height: 100vh;
	}

	.top-nav {
		display: flex;
		align-items: center;
		padding: 20px;
		background-color: #f5deb3;
	}

	.back-icon {
		width: 25px;
		height: 25px;
	}

	.page-title {
		font-size: 20px;
		margin-left: 20px;
	}

	.category-list {
		padding: 20px;
	}

	.bamboo {
		width: 100%;
		height: 50px;
		background-color: #fff;
		border: 1px solid #ccc;
		border-radius: 5px;
		margin-bottom: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bamboo text {
		font-size: 16px;
	}

	.filter-sort {
		display: flex;
		justify-content: space-around;
		padding: 20px;
	}

	.button {
		width: 100px;
		height: 30px;
		background-color: #8b0000;
		color: white;
		text-align: center;
		line-height: 30px;
		border-radius: 5px;
	}
</style>